<template>
	<div class="publicpageview">
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="170px">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">

					<el-form-item label="区房屋管理单位：" prop="dname">
						<el-select  :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
							<div v-for="(item,index) in areaList" :key="index">
								<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管理部(分中心)：" prop="manageDepartment">
						<el-select  :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange'>
							<div v-for="(item,index) in HouseList" :key="index">

								<el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管片：" prop="groupNew" label-width="140px">
						<el-select clearable v-model="listQuery.groupNew">
							<div v-for="(item,index) in guanpianList" :key="index">
								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="blockno">
						<el-input v-model="listQuery.blockno"></el-input>
					</el-form-item>
					<el-form-item label="地址：" prop="address">
						<el-input v-model="listQuery.address"></el-input>
					</el-form-item>
					<!-- <el-col :span="5">
                <el-form-item label="楼层：" prop="keyword">
                  <el-input v-model="listQuery.keyword"></el-input>
                </el-form-item>
              </el-col> -->
					<el-form-item label="门号：" prop="BuildingDoorNo">
						<el-input v-model="listQuery.BuildingDoorNo"></el-input>
					</el-form-item>
					<el-form-item label="查询日期：" prop="StartDate">
						<el-date-picker style="width: 130px;" v-model="listQuery.StartDate" type="datetime" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>
				</div>
			</el-form>
			<div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
				<el-button size="mini" @click="resetForm">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>

		<div class="publitableview">
			<!-- <el-button type="primary" size="mini" @click="handleAddUser">权限申请</el-button>
			<el-button type="primary" size="mini" @click="gotoluru">资料录入</el-button> -->
			<el-button type="primary" size="mini" @click="handleout">导出</el-button>
			<el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

				<el-table-column align="center" label="门栋号" prop="buildingDoorNo">
				</el-table-column>

				<el-table-column align="center" label="楼层" prop="floorNo">
				</el-table-column>

				<el-table-column align="center" label="单元号" prop="apartmentNo">
				</el-table-column>

				<el-table-column align="center" label="自然间" prop="roomNo">
				</el-table-column>

				<el-table-column align="center" label="总间数" prop="roomCount">
				</el-table-column>

				<el-table-column align="center" label="使用面积" prop="usingArea">
				</el-table-column>

				<el-table-column align="center" label="建筑面积" prop="buildingArea">
				</el-table-column>

				<el-table-column align="center" label="计租面积" prop="rentArea">
				</el-table-column>

				<el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleUpdate(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<!-- 弹窗部分 -->
		<el-dialog title="单元资料详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">

			<el-form :model="formData" disabled ref="dataForm" class="demo-ruleForm" label-position="right"
				label-width="150px">

				<div class='list'>
					<el-form-item label="门栋号：" prop="buildingDoorNo">
						<el-input v-model="formData.buildingDoorNo"></el-input>
					</el-form-item>
					<el-form-item label="楼层：" prop="floorNo">
						<el-input v-model="formData.floorNo"></el-input>
					</el-form-item>
					<el-form-item label="单元号：" prop="apartmentNo">
						<el-input v-model="formData.apartmentNo"></el-input>
					</el-form-item>
				</div>
				<div class='list'>
					<el-form-item label="自然间：" prop="roomNo">
						<el-input v-model="formData.roomNo"></el-input>
					</el-form-item>
					<el-form-item label="总间数：" prop="roomCount">
						<el-input v-model="formData.roomCount"></el-input>
					</el-form-item>
					<el-form-item label="使用面积：" prop="usingArea">
						<el-input v-model="formData.usingArea"></el-input>
					</el-form-item>
				</div>
				<div class='list'>
					<el-form-item label="建筑面积：" prop="buildingArea">
						<el-input v-model="formData.buildingArea"></el-input>
					</el-form-item>
					<el-form-item label="计租面积：" prop="rentArea">
						<el-input v-model="formData.rentArea"></el-input>
					</el-form-item>
				</div>

			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		getArea,
		getHouseAdmin,
		unitPage,
		blockGroupList
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					houseAdmin: '',
					areaUnit: '',
					groupNew: '',
					blockno: '',
					address: '',
					BuildingDoorNo: '',
					StartDate: '',
					manageDepartment:'',
					dname:''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				list: [],
				listLoading: false,
				dialogVisible: false,
				chaifenVisible: false,
				tianjiaVisible: false,
				formData: [],
				type: '',
				cfType: '',
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 管片列表
				guanpianList: [],
				isSearch: false,
				isluru:false
			}
		},

		computed: {},

		mounted() {
			if (localStorage.getItem('userHouseAdminId') > 0) {
				this.listQuery.areaUnit = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.houseAdmin = localStorage.getItem('userHouseAdminId')
				this.isluru = true
			}
			this.getArea()
			this.blockGroupList()
			this.unitPage()
		},

		methods: {
			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				if(e){
					this.listQuery.areaUnit = e
					this.getHouseAdmin(e)
				}
					this.listQuery.houseAdmin = ''
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.houseAdmin = e
			},
			// 管片列表
			blockGroupList() {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: '',
					pageNum: '',
					pageSize: 99999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
					this.listLoading = false
					// this.houseAdminList()
				})
			},
			// 查询
			sumbitCx() {
				this.unitPage()
			},
			unitPage() {
				let data = {
					pageNum: this.listQuery.pageNum,
					pageSize: this.listQuery.pageSize,
					AID: this.listQuery.houseAdmin,
					DID: this.listQuery.areaUnit,
					groupNew: this.listQuery.groupNew,
					blockno: this.listQuery.blockno,
					address: this.listQuery.address,
					BuildingDoorNo: this.listQuery.BuildingDoorNo,
					StartDate: this.listQuery.StartDate ?
						dayjs(this.listQuery.StartDate).format('YYYY-MM-DD HH:mm:ss') :
						''
				}
				unitPage(data).then((response) => {
					this.total = response.data.total
					this.list = response.data.list
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
				this.unitPage()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.unitPage()
			},

			resetForm(val) {
				console.log('1')
				this.listQuery.pageNum= 1,
				this.listQuery.pageSize= 20,
				this.listQuery.groupNew= '',
				this.listQuery.blockno= '',
				this.listQuery.address= '',
				this.listQuery.BuildingDoorNo= '',
				this.listQuery.StartDate= ''
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true
				this.$nextTick(() => {
					this.formData = currentData
				})
			},
			handleDelete() {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},

			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},

			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							pageNum: this.listQuery.pageNum,
							pageSize: 999999,
							houseAdmin: this.listQuery.houseAdmin,
							areaUnit: this.listQuery.areaUnit,
							groupNew: this.listQuery.groupNew,
							blockno: this.listQuery.blockno,
							address: this.listQuery.address,
							BuildingDoorNo: this.listQuery.BuildingDoorNo,
							StartDate: this.listQuery.StartDate ?
								dayjs(this.listQuery.StartDate).format('YYYY-MM-DD HH:mm:ss') :
								''
						}
						unitPage(data).then((res) => {
							let list = res.data.list
							let outList = []
							res.data.list.forEach((item, index) => {
								outList.push({
									门栋号: item.dname,
									楼层: item.floorNo,
									单元号: item.apartmentNo,
									自然间: item.roomNo,
									总间数: item.roomCount,
									使用面积: item.usingArea,
									建筑面积: item.buildingArea,
									计租面积: item.rentArea
								})
							})

							// 获取表格数据
							const data = outList
							// 转换数据为工作表
							const worksheet = XLSX.utils.json_to_sheet(data)
							// 创建新的工作簿
							const workbook = XLSX.utils.book_new()
							// 将工作表添加到工作簿
							XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
							// 导出Excel文件
							XLSX.writeFile(workbook, '单元资料.xlsx')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008c93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.cfguanpian {
		padding-bottom: 20px;
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2 {
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008c93;
		background-color: #fff;
		color: #008c93;
	}

	/deep/.el-input__inner {
		width: 130px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}

	.list {
		display: flex;
	}
</style>